<template>
    <div class="card-container">
        <van-list :offset="0" v-model="loading" :finished="finished" :immediate-check="check" @load="onLoad"> 
            <!-- list -->
            <div class="card-box" v-for="(item,index) in listData" :key="index">
                <!-- 上 -->
                <div class="card-top" v-if="lang=='zh' ">
                    订单编号：{{item.order_code}}
                    <p>{{item.buyer_state_txt}}</p>
                </div>
                <div class="card-top" v-if="lang=='en' ">
                    Order number:{{item.order_code}}
                    <p>{{item.buyer_state_txt}}</p>
                </div>
                <!-- 中(有可能是多个) -->
                <div class="card-middle" @click="goDetails(item)">
                    <div class="img-box">
                       <img :src="item.head_img">
                    </div>
                    <dl>
                        <dt  style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis;">{{item.title}}</dt>
                        <dd>￥{{item.single_price}} <span>x{{item.purchase_num}}</span></dd>
                    </dl>
                </div>
                <div class="card-bottom" >
                    {{item.create_time}}
                    <!-- 中文 -->
                    <div  v-if="lang=='zh' " class="handle-box" @click="goDetails(item)">
                        <p v-if="(item.buyer_state==0 || item.buyer_state==1 || item.seller_state==1) && item.seller_state != 8
                            && item.seller_state != 2 && item.seller_state != 9 && item.seller_state != 3
                        ">
                            拒绝售卖
                        </p>
                        <p v-if="(item.buyer_state==0 || item.buyer_state==1 ) && (item.seller_state != 8) && (item.seller_state != 1)
                            && (item.seller_state != 2) && item.seller_state != 9 && item.seller_state != 3
                        ">
                            支付保证金
                        </p>                        
                        <p v-if="item.buyer_state==1 && item.seller_state==1">我要发货</p>                        
                        <p class="look" v-if="item.buyer_state==3 || item.buyer_state==6 || item.seller_state == 8 || item.buyer_state==5
                            || item.buyer_state==2 || item.seller_state==2 || item.seller_state ==6 || item.seller_state == 5
                            || item.seller_state == 9 || (item.buyer_state==1 && item.seller_state ==3)
                        ">
                            查看交易
                        </p>                        
                    </div>
                    <!-- 英文 -->
                     <div  v-else class="handle-box" @click="goDetails(item)">
                         <p v-if="(item.buyer_state==0 || item.buyer_state==1 || item.seller_state==1) && item.seller_state != 8
                            && item.seller_state != 2 && item.seller_state != 9 && item.seller_state != 3
                        ">
                            Refusal to sell
                        </p>
                        <p v-if="(item.buyer_state==0 || item.buyer_state==1 ) && (item.seller_state != 8) && (item.seller_state != 1)
                            && (item.seller_state != 2) && item.seller_state != 9 && item.seller_state != 3
                        ">
                            Payment deposit
                        </p>                               
                        <p v-if="item.buyer_state==1 && item.seller_state==1">Send out</p>                        
                        <p class="look" v-if="item.buyer_state==3 || item.buyer_state==6 || item.seller_state == 8 || item.buyer_state==5
                            || item.buyer_state==2 || item.seller_state==2 || item.seller_state ==6 || item.seller_state == 5
                            || item.seller_state == 9  (item.buyer_state==1 && item.seller_state ==3)
                        ">
                            view
                        </p>                        
                    </div>
                </div>
                <div class="card-order" >
                   <i  v-if="lang=='zh' ">保证金：￥{{item.seller_bond}}</i>
                    <i  v-else>earnest money：￥{{item.seller_bond}}</i> 
                   <!-- 未支付 -->
                   <span class="red" v-if="item.seller_state ==0 || item.seller_state==8 || item.seller_state==9">
                       {{item.seller_state_txt}}
                    </span>
                    <!-- 已支付 -->
                     <span v-if="item.seller_state ==1 || item.seller_state==2 || item.seller_state==3 || item.seller_state==4">
                       {{item.seller_state_txt}}
                    </span>
                    <!-- 已退回 -->
                    <span v-if="item.seller_state ==6" >
                       {{item.seller_state_txt}}
                    </span>
                    <!-- 退回中 -->
                    <!-- <span v-if="item.seller_state == 5 && item.buyer_state != 4 " >
                       {{item.seller_state_txt}}
                    </span> -->
                      <!-- 已没收 -->
                     <span v-if="item.seller_state ==7">
                       {{item.seller_state_txt}}
                    </span>
                     <!-- 冻结中 -->
                     <span  v-if="item.seller_state == 5" class="green">
                       {{item.seller_state_txt}}
                    </span>
                </div>
            </div>
        </van-list>
        <div v-if="lang=='zh' ">
            <div class="nolist" v-if="finished && dataLength !=0">没有更多数据</div>
            <div class="nolist" v-if="dataLength==0">您还没有相关的订单</div>
        </div>
        <!-- loading -->
        <div class="loading-box" v-show="load">
            <van-loading type="spinner" color="white" />
        </div>
      </div>
</template>

<script>
import {getOrdersList,getOrdersDetails,postCloseOrder,postSendExpress,postRefuse,} from '@/api/order/buy'
import { Tab, Tabs, List, Toast,Dialog , Loading,} from "vant";
export default {
  name: "message",
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Dialog .name]: Dialog ,
    [Loading.name]: Loading,
  },
  //声明组件
  data() {
    return {
      lang:'zh',//当前网页语言类型 zh 中文  en 英语 
      userId: 0, //用户id
      type: 2, //类型：1已支付、2待支付、3已完成、4已取消
      pageIndex: 1, //默认显示第一页
      pageSize: 10, //一页显示5条数据
      loading: false, //加载状态
      finished: false, //是否已加载完成，加载完成后不再触发load事件
      check: false, //显示加载中提示文案
      listData: [],//取到的列表数据 用来传到子组件
      dataLength:0,//数据listData长度
      new:0,//新数据数量
      load: false, //加载提示框 是否显示
      /****订单所涉及的所 有状态
       * 
       * 买家状态：0待支付保证金、1已支付保证金、2已支付藏品金额、3交易完成、4保证金已退回、5保证金没收、6已关闭 7申请关闭',
       * 卖家状态：0待支付保证金、1已支付保证金、2已发货、3平台已验收、4平台已发货、5交易完成、6保证金已退回、7保证金没收、8拒绝售卖、9申请关闭
       * 
       * ****/ 
    };
  },
  created() {
    //获得用户id  
    if(this.$route.query.userId && this.$route.query.userId > 0) {
        this.userId = this.$route.query.userId;
        //把用户id存储在缓存
        window.localStorage.setItem("userId",this.userId);
    } else {
        this.userId = window.localStorage.getItem("userId");
    }
    //获得语言类型lang
    if(this.$route.query.lang) {
        this.lang = this.$route.query.lang;
    }
    this.getList();//获取数据
  },
  methods: {
   //获得列表数据
      getList(){
        getOrdersList(this.userId,this.pageIndex,this.pageSize,this.lang).then(res => {
            console.log(res);
            // debugger;
            if (res.code == 200) {
              let newAry = [];
              let data = res.data.list;
              this.new = res.data.new;//数量
              this.$emit('upDate', this.new);//触发父组件upDate事件 改过新数据数
              data.forEach(element => {
                  let obj = {};
                  obj.create_time = element.create_time;
                  obj.head_img = element.head_img;
                  obj.title = element.title;
                  obj.order_code = element.order_code;
                  obj.seller_bond = element.seller_bond;
                  obj.id = element.id;
                  obj.purchase_num = element.purchase_num;
                  obj.single_price = element.single_price;
                  obj.pay_money = element.pay_money;
                
                  obj.buyer_state = element.buyer_state;
                  obj.seller_state = element.seller_state;
              
                  //买卖双方返回订单状态  生成买方状态描述 买家状态：0待支付保证金、1已支付保证金、2已支付藏品金额、3交易完成、4保证金已退回、5保证金没收、6已关闭 7申请关闭',
                  if(this.lang=='zh'){
                    if(element.buyer_state == 0 && element.seller_state !=8){  //买方未支付保证金并且卖方没有拒绝售卖
                        obj.buyer_state_txt = "等待买方支付保证金";
                    }
                    if(element.buyer_state == 1 && element.seller_state <8){ //买方已支付保证金并且卖方没有拒绝售卖并且卖方没有申请关闭交易
                        obj.buyer_state_txt = "买方已支付保证金";
                    }
                    if(element.buyer_state == 1){
                        obj.buyer_state_txt = "已支付保证金";
                    } 
                    if(element.buyer_state == 2){
                        obj.buyer_state_txt = "买方已支付藏品金额";
                    }   
                    if(element.buyer_state == 3){
                        obj.buyer_state_txt = "交易完成";
                    }
                    if(element.buyer_state == 4){
                        obj.buyer_state_txt = "保证金已退回";
                    }
                    if(element.buyer_state == 5){ //交易完成
                        obj.buyer_state_txt = "保证金没收";  
                    }    
                    if(element.buyer_state == 6 || element.seller_state ==8){  //卖方状态为订单已关闭   或者  卖方拒绝售卖  在卖方界面均为交易已关闭
                        obj.buyer_state_txt = "交易已关闭";
                    }
                    if(element.buyer_state == 7){
                        obj.buyer_state_txt = "申请关闭中";
                    }
                    /****订单所涉及的所有状态
                     * 
                     * 买家状态：0待支付保证金、1已支付保证金、2已支付藏品金额、3交易完成、4保证金已退回、5保证金没收、6已关闭 7申请关闭',
                     * 卖家状态：0待支付保证金、1已支付保证金、2已发货、3平台已验收、4平台已发货、5交易完成、6保证金已退回、7保证金没收、8拒绝售卖、9申请关闭
                     * 
                     * ****/ 
                    // debugger;
                    //买卖双方返回订单状态  保证金状态  具体参考上面注释
                    if(element.seller_state == 0 || element.seller_state == 8){
                        // obj.seller_state_txt = "未支付";
                        obj.seller_state_txt = "";
                    }
                    if(element.seller_state == 1 || element.seller_state ==2 || element.seller_state == 3 || element.seller_state == 4 || element.seller_state == 5){
                        obj.seller_state_txt = "已支付";
                    }
                    if(element.seller_state == 7){
                        obj.seller_state_txt = "已没收";
                    }
                    if(element.seller_state == 6){
                        obj.seller_state_txt = "已退回";
                    }    
                    if(element.seller_state == 5 && element.seller_state != 6){
                        obj.seller_state_txt = "冻结中"; 
                    }
                    if(element.seller_state == 9){
                        obj.seller_state_txt = "未支付"; 
                    }
                  }else{
                    if(element.buyer_state == 0 && element.seller_state !=8){
                        obj.buyer_state_txt = "Pending deposit";
                    }
                    if(element.buyer_state == 1 && element.seller_state <8){
                        obj.buyer_state_txt = "Margin paid";
                    }
                    if(element.buyer_state == 2){
                        obj.buyer_state_txt = "Paid goods";
                    }   
                    if(element.buyer_state == 3){ //交易完成
                        obj.buyer_state_txt = "Transaction complete";
                    }
                    if(element.buyer_state == 4){
                        obj.buyer_state_txt = "Margin returned";
                    }
                    if(element.buyer_state == 5){
                        obj.buyer_state_txt = "Margin onfiscated";  
                    }    
                    if(element.buyer_state == 6 || element.seller_state ==8){ //卖方状态为订单已关闭   或者  卖方拒绝售卖  在卖方界面均为交易已关闭
                        obj.buyer_state_txt = "Transaction closed";
                    }
                    if(element.buyer_state == 7 || element.seller_state ==9){
                        obj.buyer_state_txt = "Application closed";
                    }  
                    //买卖双方返回订单状态  保证金状态  具体参考上面注释
                    if(element.seller_state == 0 || element.seller_state == 8){
                        // obj.seller_state_txt = "unpaid";
                         obj.seller_state_txt = "";
                    }
                    if(element.seller_state == 1 || element.seller_state ==2 || element.seller_state == 3 || element.seller_state == 4 || element.seller_state == 5){
                        obj.seller_state_txt = "Paid";
                    }
                    if(element.seller_state == 7){
                        obj.seller_state_txt = "Confiscated";
                    }
                    if(element.seller_state == 6){
                        obj.seller_state_txt = "Returned";
                    }    
                    if(element.seller_state == 5 && element.seller_state != 6){
                        obj.seller_state_txt = "Freezing"; 
                    }
                    if(element.seller_state == 9){
                        obj.seller_state_txt = "unpaid"; 
                    }
                  }    
                  newAry.push(obj);
              });
              //判断有没有数据了
              if(newAry.length>0){//有数据
                  this.listData = this.listData.concat(newAry);
                  this.loading = false;
              }else{//没有数据
                  this.finished = true;
                  this.loading = false;
              }
              console.log(this.listData); 
              this.dataLength = this.listData.length; 
              this.load = false;
            } else {
               Toast(res.msg);
            }
        });
    }, 
    //滚动加载更多
    onLoad() {
      let _this = this;
        //  console.log("触发");
        _this.pageIndex++;//每触发一次 +1
            setTimeout(() => {
                _this.getList();
        }, 500);
    },
    //跳转到详情页
    goDetails(item){
        console.log(item);
        let _id = item.id;
        let buy_state = item.buyer_state;//买家状态
        let seller_state = item.seller_state;//卖家状态
        let para = {};
        if(this.lang == 'zh'){
            para.title = "订单详情";
        }else{
            para.title = "order details";
        }
		// para.id = _id;//要跳转对象的id
		// para.lang = this.lang//显示网页语言类型 zh中文 en英文
	
        //根据不同状态跳转到不同的详情页面
        if(seller_state == 0){//卖家没有支付保证金 
            if(buy_state ==6 || seller_state==8){//如果是交易关闭或 拒绝售卖
                para.url = "/buyLook?type=7&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else{
                //跳转到支付保证金页面
                para.url = "/bepaid?lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }
        }else if(seller_state ==1 && buy_state==1){//双方都已支付保证金
             para.url = "/send?lang="+this.lang+"&id="+_id+"&userId="+this.userId;
        }else{//其他情况 全部是查看订单详情
            //继续做判断
            if(buy_state != 2 && seller_state==2){//双方都已支付保证金
                //跳转到等待买方支付藏品金额
                para.url = "/buyLook?type=1&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else
            if(buy_state == 2 && seller_state==2){//双方都已支付保证金 买家已发货
                //跳转到买方已支付藏品金额
                // para.type = 2;
                para.url = "/buyLook?type=2&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
                // this.$router.push({path: '/buyLook', query: {id:_id,type:2,lang:this.lang,}});
            }else
            if(buy_state == 2 && seller_state==3){//平台已验收
                para.url = "/buyLook?type=3&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }
            else
            if(seller_state==4){//平台已发货
                //跳转到平台已收货
                // para.type = 4;
                para.url = "/buyLook?type=4&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
                // this.$router.push({path: '/buyLook', query: {id:_id,type:4,lang:this.lang,}});
            }
            if(seller_state==5){//交易完成
                //跳转到买方已支付藏品金额
                  para.url = "/buyLook?type=5&lang="+this.lang+"&id="+_id+"&userId="+this.userId; 
            }
            if(seller_state==6){//保证金退回
                if(buy_state == 4){//如果对方保证金也退回 交易完成
                    para.url = "/buyLook?type=5&lang="+this.lang+"&id="+_id+"&userId="+this.userId; 
                }else{
                    //跳转到买方已支付藏品金额
                    para.url = "/buyLook?type=7&lang="+this.lang+"&id="+_id+"&userId="+this.userId; 
                }
            }
            if(seller_state==8){//自带交易已关闭 都没付钱
                //跳转到买方已支付藏品金额
                para.url = "/buyLook?type=7&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
                // this.$router.push({path: '/buyLook', query: {id:_id,type:7,lang:this.lang,}});
            }
            if(seller_state==9){//买方申请关闭 
                //跳转到买方已支付藏品金额
                para.url = "/buyLook?type=6&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
                // this.$router.push({path: '/buyLook', query: {id:_id,type:7,lang:this.lang,}});
            }else{
                //跳转到买方已支付保证金 卖方已经发货给平台
                para.url = "/buyLook?type=3&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }
        }
        console.log(para);
		this.interaction.hLink(para);
    },
  }
};
</script>
<style lang="stylus" scoped>
*{
    box-sizing:border-box;
}
.card-box{
    background: #fff;
   
    padding-bottom :0;
    border-bottom: 1px solid #f1f1f1;
    overflow: hidden;
    margin-bottom :.186667rem;
    
    // 上
    .card-top{
        height :1.013333rem;
        line-height :1.013333rem;
        font-size:.32rem;
        padding:0 .213333rem;
        color:#a2a2a2;
        p{
            color:#cb9c57;
            float:right;
        }
        .floatl{
            float:left;
        }
    }
    // 中
    .card-middle{
        width: 100%;
        overflow:hidden;
        background:#f5f5f5;
        padding:.266667rem;
        .img-box{
            width :2.133333rem;
            height :2.133333rem;
            float:left;
            position:relative;
            img{
                width :100%;
                margin :0;
                height 100%;
            }
        }
        dl{
            float:left;
            width :73%;
            margin-left :3.3%
            position :relative;
            height: 2.133333rem;
            dt{
                font-family:PingFangSC-Regular;
                font-size:.373333rem;
                color:#494949;
                letter-spacing:.008rem;
                line-height:.533333rem;
                // height: 1.52rem;
                text-align:left;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                
            }
             dd{
                position:absolute;
                bottom :0;   
                font-family:PingFangSC-Medium;
                font-size:13px;
                color:#cb9c57;
                letter-spacing:0;
                text-align:left;
                width :100%;
                span{
                    font-family:PingFangSC-Regular;
                    font-size:.346667rem;
                    color:#2d2d2d;
                    letter-spacing:0;
                    text-align:right;
                    position:absolute;
                    right :0;
                }             
            }
        }
    }
    // 下
    .card-bottom{
        border-bottom: 1px solid #f5f5f5;
        overflow: hidden;
        padding:0 .266667rem;
        height :1.013333rem;
        line-height :1.013333rem;
        box-sizing :border-box;
        font-family:PingFangSC-Regular;
        font-size:.346667rem;
        position:relative;
        color:#cb9c57;
        .handle-box{
            position:absolute;
            right:.266667rem;
            top:0;
            height: 1.013333rem;

            p{
                float:left;
                margin-left :.533333rem;
                font-size:.346667rem;
            }
            p:last-child{
                background:#cb9c57;
                border-radius:100px;
                width:2.213333rem;
                height:.693333rem;
                line-height:.693333rem;
                text-align :center;
                line-height :.693333rem;
                font-family:PingFangSC-Medium;
                color:#ffffff;
                margin-top :.16rem;
            }
            p.look{
                color:#cb9c57;
                background:#ffffff;
                border:1px solid #cb9c57;
                border-radius:100px;
                width:2.16rem;
                font-family:PingFangSC-Regular;
                font-size:.346667rem;
                color:#cb9c57;
                text-align:center;
                height:.64rem;
                line-height :.64rem;
            }

        }
    }
    // 下
    .card-order{
        padding:0 .266667rem;
        height :1.013333rem;
        line-height :1.013333rem;
        font-family:PingFangSC-Medium;
        font-size:.346667rem;
        color:#494949;
        span{
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            float:right;
            color:#58a701;
            &.yellow{
                 color:#cb9c57;
            }
            &.red{
              color:#d84053;
            }
            &.yue{
              color:#d84053;
            }
        }
    }
}
</style>

